<script setup lang="ts">
import Records from './components/records.vue'
import Statistics from './components/statistics.vue'

const activeName = ref<'records' | 'statistics'>('statistics')
const childRefs = ref([])
const tabsData = [
    {
        component: Statistics,
        label: '统计',
        name: 'statistics',
    },
    {
        component: Records,
        label: '沟通记录',
        name: 'records',
    },
]
</script>

<template>
    <el-main class="bg-white h-full">
        <span class="text-[16px]">置业顾问</span>

        <div class="p-16 my-20 flex items-center">
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.p9N4LqKEfaJ2AewVtiYTiAAAAA?rs=1&pid=ImgDetMain"
                 alt=""
                 width="40"
                 height="40"
            >

            <div class="mx-20 text-[20px] font-semibold">
                <div>张三</div>

                <div>18888888888</div>
            </div>

            <div class="flex-1">
                <div class="overflow-hidden">
                    <div class="p-8 bg-slate-100 float-left">
                        金牌销售
                    </div>

                    <div class="p-8 ml-16 bg-slate-100 float-left">
                        活跃度高
                    </div>

                    <div class="p-8 ml-16 bg-slate-100 float-left">
                        社交达人
                    </div>
                </div>

                <div class="mt-8 text-#409EFF cursor-pointer">
                    查看二维码
                </div>
            </div>
        </div>

        <el-tabs v-model="activeName">
            <el-tab-pane v-for="tab in tabsData"
                         :key="tab.name"
                         :label="tab.label"
                         :name="tab.name"
                         class="h-full overflow-x-hidden overflow-y-auto"
            >
                <component :is="tab.component"
                           ref="childRefs"
                />
            </el-tab-pane>
        </el-tabs>
    </el-main>
</template>
